<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Vue-Lib/dist/vue.js"></script>
</head>
<body>

<div id="app2">
    <span>请输入</span>
    <input  v-model="searchQuery">
    <ul v-for="user in users">
        <li>{{user}}</li>
    </ul>



</div>

<script>
    var defalutUsers = ['Ab','Cd','Bt'];
    var vm1 = new Vue({
        el: '#app2',
        data:{
            searchQuery: ''
        },
        computed:{
            users: function () {
                var filterKey = this.searchQuery;
                var data1 = null;
                //console.log('filterKey:' + filterKey);
                if(filterKey.length>0){
                    data1 = defalutUsers.filter(function (row) {
                        //console.log('row:' + row);
                        return Object.keys(row).some(function (key) {
                            console.log('row[key]:' + row[key]);
                            if(row[key] == filterKey){
                                return true;
                            }
                            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
                        })
                    });
                    return data1;
                }
                data1 =  defalutUsers;
                return data1;
            }
            
        }

    });
</script>
</body>
</html>